<template>
    <div class="password-strength-container">
        <el-input v-model="password" type="password" placeholder="请输入密码" show-password
            @input="checkPasswordStrength"></el-input>
        <div class="strength-meter">
            <div class="strength-bar" :class="strengthClass"></div>
        </div>

        <div class="strength-info">
            <span>密码强度: {{ strengthText }}</span>
            <el-tooltip effect="dark" placement="right" popper-class="password-tooltip">
                <template #content>
                    <div class="password-rules">
                        <h4>密码规则</h4>
                        <ul>
                            <li :class="{ 'rule-valid': hasLength }">长度至少8个字符</li>
                            <li :class="{ 'rule-valid': hasLowercase }">包含小写字母</li>
                            <li :class="{ 'rule-valid': hasUppercase }">包含大写字母</li>
                            <li :class="{ 'rule-valid': hasNumber }">包含数字</li>
                            <li :class="{ 'rule-valid': hasSpecialChar }">包含特殊字符</li>
                        </ul>
                    </div>
                </template>
                <el-icon class="info-icon">
                    <QuestionFilled />
                </el-icon>
            </el-tooltip>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { QuestionFilled } from '@element-plus/icons-vue';

const emit = defineEmits(['sendData']);
const password = ref('');

// 密码规则验证
const hasLength = computed(() => password.value.length >= 8);
const hasLowercase = computed(() => /[a-z]/.test(password.value));
const hasUppercase = computed(() => /[A-Z]/.test(password.value));
const hasNumber = computed(() => /[0-9]/.test(password.value));
const hasSpecialChar = computed(() => /[^A-Za-z0-9]/.test(password.value));

// 计算密码强度
const strengthScore = computed(() => {
    let score = 0;
    if (hasLength.value) score += 1;
    if (hasLowercase.value) score += 1;
    if (hasUppercase.value) score += 1;
    if (hasNumber.value) score += 1;
    if (hasSpecialChar.value) score += 1;
    return score;
});

// 密码强度文本和样式
const strengthText = computed(() => {
    switch (strengthScore.value) {
        case 0: return '无';
        case 1:
        case 2: return '弱';
        case 3: return '中等';
        case 4:
        case 5: return '强';
        default: return '无';
    }
});

const strengthClass = computed(() => {
    return {
        'strength-0': strengthScore.value === 0,
        'strength-1': strengthScore.value === 1,
        'strength-2': strengthScore.value === 2,
        'strength-3': strengthScore.value === 3,
        'strength-4': strengthScore.value === 4,
        'strength-5': strengthScore.value === 5,
    };
});

const checkPasswordStrength = () => {
    // 这里可以添加额外的逻辑
    emit('sendData', password.value, strengthScore.value === 5);
};
</script>

<style scoped>
.password-strength-container {
    margin-bottom: 20px;
}

.strength-meter {
    height: 6px;
    background-color: #eee;
    border-radius: 3px;
    margin: 8px 0;
    overflow: hidden;
}

.strength-bar {
    height: 100%;
    width: 0;
    transition: all 0.3s ease;
}

.strength-0 {
    width: 0%;
    background-color: transparent;
}

.strength-1 {
    width: 20%;
    background-color: #ff4d4f;
}

.strength-2 {
    width: 40%;
    background-color: #ff7d45;
}

.strength-3 {
    width: 60%;
    background-color: #ffa940;
}

.strength-4 {
    width: 80%;
    background-color: #73d13d;
}

.strength-5 {
    width: 100%;
    background-color: #52c41a;
}

.strength-info {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #666;
}

.info-icon {
    margin-left: 8px;
    cursor: pointer;
    color: #999;
}

.info-icon:hover {
    color: #409eff;
}
</style>

<style>
.password-tooltip {
    max-width: 300px;
}

.password-rules h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
}

.password-rules ul {
    margin: 0;
    padding-left: 20px;
}

.password-rules li {
    color: #ff4d4f;
    margin-bottom: 4px;
}

.password-rules li.rule-valid {
    color: #52c41a;
}
</style>